web-artifacts-builder Skill

概述

Anthropic 官方 Skill，用于构建复杂 React Artifacts，支持状态管理、路由和 shadcn/ui 组件，通过 Parcel + html-inline 将应用打包为单个 HTML 文件。

关键内容

1. 技术栈：
2. React 18
3. TypeScript (strict)
4. Vite（开发服务器）
5. Parcel（打包）
6. Tailwind CSS 3.4.1
7. shadcn/ui（40+ 组件）

8. html-inline（资源内联）

9. 适用场景：

10. ✅ 多组件 + 状态管理 + 路由
11. ✅ 复杂 TypeScript 类型系统
12. ✅ 40+ shadcn/ui 组件
13. ✅ 输出单个可分享 HTML 文件

14. ❌ 简单单文件 HTML/JSX（用 frontend-design Skill）

15. 五步工作流：

16. Step 1：初始化（init-artifact.sh）
17. Step 2：开发 Artifact
18. Step 3：Bundle（bundle-artifact.sh）
19. Step 4：分享（present_files）

20. Step 5：可选测试

21. 为什么用 Parcel 而非 Vite build：

22. Vite 输出多文件，需服务器托管

23. Parcel + html-inline = 单文件 HTML（500KB ~ 3MB）

24. Anti-AI-Slop 警告：

25. 避免过度居中布局
26. 避免紫色渐变
27. 避免统一圆角

28. 避免 Inter 字体

29. 限制：

30. Node 18 需降级 Vite
31. Bundle 较大（1-3MB）
32. 无 SSR 支持
33. 外部 API 调用需配合 Anthropic API

来源

• 03_web_artifacts_builder_skill — web-artifacts-builder Skill 解析
• GitHub: anthropics/skills

相关

• Claude Code — uses
• frontend-design Skill — relates_to
• Anthropic — created_by
• shadcn/ui — uses